Skip to content

Conversation

podliashanyk
Copy link
Contributor

@podliashanyk podliashanyk commented Aug 8, 2025

Scope and purpose

Fixes #1262
Depends on #1524

How to test

Make sure you have the right version of tailwind+daisy installed. While standing in the repo root, run:

PYTHONPATH=./src python3 src/argus/htmx/tailwindtheme/get_tailwind.py

This will replace the binary in src/argus/htmx/tailwindtheme/tailwindcss with a new binary and update various libraries. You shouldn't need to put the binary in your path if you use make.

Run make tailwind to update styles as usual.

Contributor Checklist

Every pull request should have this checklist filled out, no matter how small it is.
More information about contributing to Argus can be found in the
Development docs.

  • Added a changelog fragment for towncrier
  • Added/amended tests for new/changed code
  • Added/changed documentation, including updates to the user manual if feature flow or UI is considerably changed
  • Linted/formatted the code with ruff and djLint, easiest by using pre-commit
  • The first line of the commit message continues the sentence "If applied, this commit will ...", starts with a capital letter, does not end with punctuation and is 50 characters or less long. See our how-to
  • If applicable: Created new issues if this PR does not fix the issue completely/there is further work to be done
  • If this results in changes in the UI: Added screenshots of the before and after
  • If this results in changes to the database model: Updated the ER diagram

@podliashanyk podliashanyk requested a review from a team August 8, 2025 12:33
@podliashanyk podliashanyk self-assigned this Aug 8, 2025
@podliashanyk podliashanyk added frontend Affects frontend dependencies Run `tox -r` before testing locally, dependencies have changed nonews No news fragment is necessary for this PR (e.g. refactoring, cleanups, workflow/development changes) labels Aug 8, 2025
Copy link

github-actions bot commented Aug 8, 2025

Test results

    4 files      1 errors  351 suites   13m 6s ⏱️
  565 tests   563 ✅ 1 💤 1 ❌
1 695 runs  1 689 ✅ 3 💤 3 ❌

For more details on these parsing errors and failures, see this check.

Results for commit 327835e.

♻️ This comment has been updated with latest results.

@codecov-commenter
Copy link

codecov-commenter commented Aug 8, 2025

Codecov Report

❌ Patch coverage is 38.00000% with 31 lines in your changes missing coverage. Please review.
✅ Project coverage is 78.16%. Comparing base (7d7283f) to head (25ce868).

Files with missing lines Patch % Lines
.../argus/htmx/management/commands/tailwind_config.py 0.00% 13 Missing ⚠️
src/argus/htmx/themes/utils.py 56.00% 11 Missing ⚠️
src/argus/htmx/utils/templates.py 45.45% 6 Missing ⚠️
src/argus/htmx/tailwindtheme/config.py 0.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #1527      +/-   ##
==========================================
- Coverage   78.34%   78.16%   -0.19%     
==========================================
  Files         124      125       +1     
  Lines        5468     5495      +27     
==========================================
+ Hits         4284     4295      +11     
- Misses       1184     1200      +16     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link
Contributor

@hmpf hmpf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll have to update the docs for how to do themes.

@hmpf hmpf added CSS theme Theme-dependent frontend problems needs NOTES NOTES.md must be updated for release labels Aug 11, 2025
@hmpf hmpf self-requested a review August 11, 2025 09:59
hmpf
hmpf previously requested changes Aug 11, 2025
Copy link
Contributor

@hmpf hmpf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I try to make the styles via the Makefile (make tailwind) I get:

tailwindcss -c src/argus/htmx/tailwindtheme/tailwind.config.js -i src/argus/htmx/tailwindtheme/styles.css -o src/argus/htmx/static/styles.css
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
Error: Failed to find 'tailwindcss'
  in [
    CENSORED/src/argus/htmx/tailwindtheme/snippets
  ]
    at /snapshot/tailwindcss/node_modules/postcss-import/lib/resolve-id.js:35:13
    at async Promise.all (index 0)
    at async LazyResult.runAsync (/snapshot/tailwindcss/node_modules/postcss/lib/lazy-result.js:261:11)
    at async build (/snapshot/tailwindcss/lib/cli/build/index.js:49:9)
make: *** [Makefile:33: tailwind] Error 1

@podliashanyk
Copy link
Contributor Author

If I try to make the styles via the Makefile (make tailwind) I get:

tailwindcss -c src/argus/htmx/tailwindtheme/tailwind.config.js -i src/argus/htmx/tailwindtheme/styles.css -o src/argus/htmx/static/styles.css
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
Error: Failed to find 'tailwindcss'
  in [
    CENSORED/src/argus/htmx/tailwindtheme/snippets
  ]
    at /snapshot/tailwindcss/node_modules/postcss-import/lib/resolve-id.js:35:13
    at async Promise.all (index 0)
    at async LazyResult.runAsync (/snapshot/tailwindcss/node_modules/postcss/lib/lazy-result.js:261:11)
    at async build (/snapshot/tailwindcss/lib/cli/build/index.js:49:9)
make: *** [Makefile:33: tailwind] Error 1

Remember to switch to new version of tailwind cli extra, I suggest https://github.com/dobicinaitis/tailwind-cli-extra/releases/tag/v2.0.0

@podliashanyk
Copy link
Contributor Author

Depends on #1524

@hmpf
Copy link
Contributor

hmpf commented Aug 13, 2025

Idea: make css snippets more pluggable.

Fix: Finding defined themes to add to user theme dropdown.

@podliashanyk
Copy link
Contributor Author

podliashanyk commented Aug 13, 2025

TODOs before this PR is considered completed:

  • ensure that "argus" theme is visible in theme selector dropdown (fix likely belongs in src/argus/htmx/management/commands/tailwind_config.py)

  • Add new way to add custom themes:

    • update DEFAULT_THEMES in src/argus/htmx/defaults.py so that custom themes are defined after a new format (format must be compliant with https://daisyui.com/docs/themes/#how-to-add-a-new-custom-theme):

      "name": {
            "color-scheme": "light",
            "--color-primary": "#006d91",
            "--color-primary-content": "#d1e1e9",
            "--color-secondary": "#f3b61f",
            etc...
      }
      
    • ensure that custom themes are wrapped with @plugin "daisyui/theme" {name: ...} (as per https://daisyui.com/docs/themes/#how-to-add-a-new-custom-theme) in src/argus/htmx/management/commands/tailwind_config.py

    • remove hard coded definition of theme "argus" from src/argus/htmx/tailwindtheme/snippets/10-tailwind.css

  • Document new way to add custom themes

  • Fix font size discrepancy between text in badges and the rest of the table row

  • Reduce font size in the "Filter"-selector:

  • Fix font size discrepancy within the stats widget:

  • Fix divider in the user menu dropdown:

  • Fix alignment of inputs on the Profiles page:

  • Fix programatic connection label-to-input in the incident update modals (as per https://daisyui.com/docs/upgrade/#other-removals) [OPTIONAL]

  • Fix border around tabs

@hmpf
Copy link
Contributor

hmpf commented Aug 13, 2025

It's probably get_themes_from_css() in src/argus/htmx/themes/utils.py that needs updating for the correct list of themes to choose from.

@hmpf hmpf force-pushed the tailwind-v4-and-daisy-v5-upgrade branch from ea6ac61 to 1a57c03 Compare August 14, 2025 05:58
@hmpf
Copy link
Contributor

hmpf commented Aug 14, 2025

I have rebased this on the merged #1524 so that we can use the correct version of the standalone tailwind cli, I've set it to 2.1.37, the currently newest.

@hmpf hmpf self-requested a review August 14, 2025 09:00
@hmpf
Copy link
Contributor

hmpf commented Aug 14, 2025

* [ ]  Reduce font size in the "Filter"-selector:
Screenshot 2025-08-13 at 12 25 04

The font size for "Filter" was too large, but the size for the others were too small!

@hmpf
Copy link
Contributor

hmpf commented Aug 14, 2025

* [x]  Fix alignment of inputs on the Profiles page:
Screenshot 2025-08-13 at 12 29 08

Fixed by modernizing labels.

@hmpf
Copy link
Contributor

hmpf commented Aug 14, 2025

* [ ]  Fix font size discrepancy between text in badges and the rest of the table row
Screenshot 2025-08-13 at 12 23 48

The badges have their old size, it seems that "table-xs" now means 11pt, not 12pt as it did before. 11pt is painfully small to me at least.

@hmpf
Copy link
Contributor

hmpf commented Aug 14, 2025

* [x]  Fix font size discrepancy within the stats widget:
Screenshot 2025-08-13 at 12 25 52

The size is fixable by removing "select-xs", but the font is still a bit low contrast.

@hmpf
Copy link
Contributor

hmpf commented Aug 14, 2025

There is no <label> or class="form-control" in the modals at all, unclear what you mean.

@hmpf hmpf force-pushed the tailwind-v4-and-daisy-v5-upgrade branch from cc5af6e to 327835e Compare October 10, 2025 08:58
Copy link

Quality Gate Failed Quality Gate failed

Failed conditions
E Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CSS dependencies Run `tox -r` before testing locally, dependencies have changed frontend Affects frontend needs NOTES NOTES.md must be updated for release nonews No news fragment is necessary for this PR (e.g. refactoring, cleanups, workflow/development changes) theme Theme-dependent frontend problems

Projects

Status: Changes requested

Development

Successfully merging this pull request may close these issues.

Idea: Change to use tailwind v4

4 participants